CSS @media: Patrones avanzados de Media Queries para una web verdaderamente responsiva

En el dinámico panorama del desarrollo web moderno, crear experiencias que se adapten sin problemas a una gama cada vez mayor de dispositivos y contextos de usuario no es solo una buena práctica, es un imperativo. Desde monitores de escritorio de alta resolución hasta smartphones compactos, desde usuarios en bulliciosos centros urbanos con internet de alta velocidad hasta aquellos en áreas remotas con ancho de banda limitado, y desde individuos que prefieren temas oscuros hasta aquellos que requieren movimiento reducido, la web debe ser flexible. Aquí es donde las reglas CSS @media, la piedra angular del diseño responsivo, trascienden su aplicación básica para convertirse en herramientas potentes para una adaptabilidad avanzada.

Aunque muchos desarrolladores están familiarizados con el uso de @media para simples ajustes de puntos de quiebre, el verdadero poder reside en sus patrones avanzados, operadores lógicos y la capacidad de aprovechar las preferencias del usuario y del entorno. Esta guía completa te llevará más allá de los fundamentos, explorando el intrincado mundo de las características avanzadas de las media queries que te permitirán crear aplicaciones web verdaderamente resilientes, inclusivas y accesibles a nivel mundial.

Profundizaremos en técnicas que permiten que tus diseños reaccionen no solo al tamaño de la pantalla, sino también a las capacidades del dispositivo, la configuración de accesibilidad del usuario e incluso al entorno circundante, garantizando una experiencia superior para cada usuario, en todas partes.

La base: un breve repaso de la sintaxis básica de @media

Antes de sumergirnos en los patrones avanzados, repasemos rápidamente los cimientos. Una media query básica consiste en un tipo de medio opcional (como screen, print, all) y una o más características de medio (como min-width, orientation). Los estilos dentro del bloque @media se aplican solo si se cumplen las condiciones.

            /* Ejemplo básico: los estilos se aplican solo en pantallas de más de 768px de ancho */
@media screen and (min-width: 768px) {
  body {
    padding: 20px;
  }
}

/* Los estilos se aplican solo al imprimir la página */
@media print {
  nav {
    display: none;
  }
}

            

              
                Copy
              
            
          

Este entendimiento fundamental es crucial, ya que los patrones avanzados se basan directamente en él.

Más allá de los puntos de quiebre: entendiendo las características de las Media Queries

Aunque width y height son las características de medios más utilizadas, existe un rico conjunto de otras que permiten decisiones de diseño mucho más matizadas. Comprender estas capacidades es clave para ir más allá de los diseños genéricos para móvil/tableta/escritorio.

Características basadas en el Viewport (los sospechosos habituales y más)

Estas características se relacionan con las dimensiones y características del viewport del navegador, no con la pantalla física del dispositivo.

• width, height, min-width, max-width, min-height, max-height: Son el pan de cada día del diseño responsivo. Te permiten definir puntos de quiebre basados en el área visible del navegador. Por ejemplo, podrías cambiar un diseño de una sola columna a uno de varias columnas cuando min-width alcanza un cierto valor en píxeles.

            /* Aplicar un diseño de dos columnas en pantallas más anchas */
@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

• aspect-ratio, min-aspect-ratio, max-aspect-ratio: Estas características te permiten orientar diseños basados en la relación entre el ancho y el alto del viewport. Esto es increíblemente útil para optimizar contenido para diversas formas de pantalla, desde monitores ultra anchos hasta smartphones altos.

            /* Optimizar la imagen principal para pantallas ultra anchas (p. ej., 21/9) */
@media (min-aspect-ratio: 16/9) {
  .hero-banner {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

            

              
                Copy
              
            
          

• orientation: Esta característica detecta si el viewport está en modo portrait (vertical, la altura es mayor o igual que el ancho) o landscape (horizontal, el ancho es mayor que la altura). Es particularmente vital para las experiencias en móviles y tabletas.

            /* Ajustar el diseño para la orientación horizontal en tabletas */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

            

              
                Copy
              
            
          

Características basadas en el dispositivo (menos comunes, pero útiles)

Estas características se relacionan con las características del dispositivo de salida físico. Aunque las consultas basadas en el viewport son generalmente preferibles para el diseño de contenido, las características basadas en el dispositivo tienen nichos específicos.

• device-width, device-height (y sus variantes min/max): Históricamente, se usaban para apuntar a resoluciones de dispositivos específicos. Sin embargo, con los tamaños variables de las ventanas del navegador en escritorios y tabletas, y las diferentes densidades de píxeles, depender de estas puede ser poco fiable para el diseño general. Las dimensiones del viewport son casi siempre más apropiadas. Aún podrían considerarse en escenarios muy específicos, como aplicaciones diseñadas para pantallas de tamaño fijo como quioscos, pero esto es raro en el desarrollo web típico.
• resolution: Esta característica te permite apuntar a pantallas basadas en su densidad de píxeles (DPI o DPX – puntos por píxel). Esto es crucial para servir imágenes de alta calidad a pantallas "Retina" o de alta densidad de píxeles sin entregar archivos innecesariamente grandes a pantallas estándar.

            /* Servir una imagen de fondo de mayor resolución para pantallas de alta densidad de píxeles */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

            

              
                Copy
              
            
          

Nótese el uso tanto de dpi como de dppx para cubrir diferentes interpretaciones de los navegadores y preparar tu código para el futuro. dppx (puntos por unidad de píxel) es generalmente preferido ya que es más independiente del dispositivo.

Operadores lógicos: combinando condiciones con precisión

Para construir media queries verdaderamente sofisticadas, necesitas combinar múltiples condiciones usando operadores lógicos. Estos te permiten especificar exactamente cuándo debe aplicarse un conjunto de estilos.

Operador `and`: todas las condiciones deben ser verdaderas

La palabra clave and combina múltiples características de medios o tipos de medios y características. Todas las condiciones especificadas deben evaluarse como verdaderas para que se apliquen los estilos.

            /* Aplicar estilos solo en pantallas entre 768px y 1024px de ancho */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    order: 2;
  }
  .main-content {
    width: 70%;
  }
}

            

              
                Copy
              
            
          

Esto es extremadamente útil para apuntar a rangos de dispositivos específicos, como tabletas en modo vertical, o para crear diseños altamente personalizados para dimensiones de pantalla muy específicas.

Operador `or` (`, ` separado por comas): cualquiera de las condiciones puede ser verdadera

En las reglas @media de CSS, una coma (`,`) actúa como un OR lógico. Si cualquiera de las media queries separadas por comas se evalúa como verdadera, se aplican los estilos asociados.

            /* Los estilos se aplican si la pantalla es más ancha de 1200px O si el dispositivo está en orientación horizontal (independientemente del ancho) */
@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  .header-nav {
    display: flex;
    flex-direction: row;
  }
}

/* Los estilos se aplican para medios de impresión O para pantallas con una resolución mínima */
@media print, (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast; /* Para una mejor renderización en impresión/alta resolución */
  }
}

            

              
                Copy
              
            
          

Esta potente característica te permite agrupar estilos que deben aplicarse bajo múltiples condiciones distintas, lo que lleva a hojas de estilo más concisas y legibles.

Operador `not`: invirtiendo una condición

La palabra clave not niega una media query completa, lo que significa que los estilos se aplican si la condición especificada no se cumple.

            /* Aplicar estilos a todos los tipos de medios EXCEPTO impresión */
@media not print {
  .interactive-element {
    cursor: pointer;
  }
}

/* Aplicar estilos si NO es una pantalla con un ancho mínimo de 768px (es decir, para impresión o pantallas más pequeñas de 768px) */
@media not screen and (min-width: 768px) {
  .desktop-only-feature {
    display: none;
  }
}

            

              
                Copy
              
            
          

El operador not puede ser complicado y debe usarse con prudencia. Asegúrate de entender el alcance de lo que se está negando. Por ejemplo, @media not screen and (min-width: 768px) significa "no una pantalla Y con un ancho mínimo de 768px", lo que es lógicamente equivalente a "si no es una pantalla O si es una pantalla Y el ancho máximo es menor de 768px". A menudo es más claro usar max-width en lugar de not min-width.

Palabra clave `only`: asegurando la compatibilidad con versiones anteriores (contexto histórico)

La palabra clave only se introdujo para ocultar hojas de estilo de navegadores antiguos que no soportaban completamente las media queries. Si un navegador antiguo encontraba @media only screen, normalmente ignoraría la regla porque no reconocía only como un tipo de medio válido. Los navegadores modernos lo analizan correctamente. Dado el amplio soporte de los navegadores para las media queries hoy en día, only es en gran medida redundante para el nuevo desarrollo, pero podría verse en bases de código heredadas.

            /* Ejemplo: los estilos solo se aplican en pantallas, ocultos para navegadores muy antiguos */
@media only screen and (min-width: 992px) {
  .some-component {
    padding: 30px;
  }
}

            

              
                Copy
              
            
          

Características de medios de preferencia del usuario: abrazando la inclusividad y la accesibilidad

Estas son quizás las características de media query avanzadas más emocionantes e impactantes, ya que empoderan a los desarrolladores para responder directamente a las preferencias a nivel de sistema operativo o navegador de los usuarios, lo que conduce a experiencias significativamente más accesibles y amigables. Esto es especialmente importante para una audiencia global con diversas necesidades y entornos.

prefers-color-scheme: modos claro y oscuro

Esta característica detecta si el usuario ha solicitado un tema de color claro u oscuro para su sistema operativo o agente de usuario. Implementar el modo oscuro mejora significativamente la accesibilidad y la comodidad, particularmente en entornos con poca luz o para usuarios con sensibilidad a la luz.

• no-preference: El usuario no ha indicado ninguna preferencia.
• light: El usuario prefiere un tema claro.
• dark: El usuario prefiere un tema oscuro.

            /* Tema predeterminado (claro) */
body {
  background-color: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  a {
    color: #66ccff;
  }
}

            

              
                Copy
              
            
          

Para implementaciones de modo oscuro más robustas, las Propiedades Personalizadas de CSS (variables) son invaluables, permitiéndote definir paletas de colores dinámicamente.

prefers-reduced-motion: respetando la comodidad del usuario

Las animaciones y transiciones pueden mejorar la experiencia del usuario, pero para algunas personas (p. ej., aquellas con trastornos vestibulares, TDAH, o simplemente quienes encuentran el movimiento una distracción), pueden causar incomodidad o incluso náuseas. Esta característica detecta si el usuario ha solicitado un mínimo de animaciones no esenciales.

• no-preference: No se indica ninguna preferencia.
• reduce: El usuario prefiere movimiento reducido.

            /* Animación predeterminada */
.animated-element {
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
  .hero-carousel {
    scroll-behavior: auto; /* Deshabilitar el desplazamiento suave */
  }
}

            

              
                Copy
              
            
          

Es una buena práctica de accesibilidad proporcionar siempre una alternativa de movimiento reducido. Esto ayuda a construir una web que sea utilizable y cómoda para todos, independientemente de sus sensibilidades individuales.

prefers-contrast: ajustando el contraste visual

Esta característica detecta si el usuario ha solicitado un nivel de contraste específico para su sistema operativo. Esto es muy beneficioso para usuarios con baja visión o ciertas deficiencias en la percepción del color.

• no-preference: Sin preferencia.
• less: El usuario prefiere menos contraste.
• more: El usuario prefiere más contraste.
• custom: El usuario tiene una configuración de contraste personalizada (menos común).

            /* Estilos para un mayor contraste */
@media (prefers-contrast: more) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
  button {
    border: 2px solid #FFFFFF;
    background-color: #333333;
    color: #FFFFFF;
  }
}

            

              
                Copy
              
            
          

Al proporcionar estilos para diferentes preferencias de contraste, contribuyes activamente a un entorno digital más accesible e inclusivo para los usuarios de todo el mundo.

forced-colors: manejando paletas de colores forzadas por el sistema

Cuando un sistema operativo (como el Modo de Alto Contraste de Windows) fuerza una paleta de colores específica en las aplicaciones, a veces puede anular o romper los diseños web personalizados. La característica de medios forced-colors ayuda a los desarrolladores a adaptarse a este escenario, permitiéndoles proporcionar estilos que funcionen bien dentro de las restricciones de color forzadas.

• active: El agente de usuario tiene un modo de colores forzados activo.
• none: No hay modo de colores forzados activo.

            /* Ajustes para usuarios del Modo de Alto Contraste */
@media (forced-colors: active) {
  /* Asegurar que los elementos tengan bordes visibles */
  button, input[type="submit"] {
    border: 1px solid currentColor;
    background-color: transparent;
    color: HighlightText;
  }
  /* Eliminar imágenes de fondo que puedan ocultar el texto */
  .icon {
    background-image: none;
    border: 1px solid currentColor; /* Hacerlos visibles */
  }
}

            

              
                Copy
              
            
          

Esta característica es vital para garantizar el cumplimiento de los estándares de accesibilidad (como WCAG) y proporcionar una experiencia funcional para los usuarios que dependen de estos ajustes a nivel de sistema.

Características de medios ambientales: adaptándose a las capacidades del dispositivo

Estas características de medios te permiten adaptar las experiencias según cómo un usuario interactúa con su dispositivo, como el tipo de dispositivo de puntero que utiliza o las capacidades de su pantalla.

hover y any-hover: distinguiendo dispositivos de puntero

Estas características ayudan a diferenciar entre dispositivos que admiten el efecto hover (p. ej., escritorios con un ratón) y aquellos que utilizan principalmente el tacto (p. ej., smartphones, tabletas). Esto es crucial para evitar patrones de UX frustrantes en dispositivos solo táctiles.

• hover: Se refiere al mecanismo de entrada principal.
• any-hover: Se refiere a cualquier mecanismo de entrada disponible.
• Valores: none (sin soporte para hover), hover (con soporte para hover).

            /* Mostrar tooltips solo en dispositivos con capacidad de hover */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* En dispositivos táctiles, los tooltips pueden activarse con el foco o no mostrarse en absoluto */
  .tooltip-trigger:hover .tooltip-content {
    opacity: 0;
    visibility: hidden;
  }
  .touch-friendly-info-icon {
    display: block;
  }
}

            

              
                Copy
              
            
          

Usar any-hover es a menudo más robusto, ya que un dispositivo puede tener tanto entrada táctil como de ratón (p. ej., un portátil 2 en 1). Si any-hover es hover, entonces al menos un método de entrada admite el efecto hover. Si any-hover es none, entonces ningún método de entrada lo admite.

pointer y any-pointer: distinguiendo la precisión del puntero

Estas características detectan la precisión del dispositivo de puntero principal (pointer) o de cualquiera disponible (any-pointer).

• none: Sin dispositivo de puntero.
• coarse: Dispositivo de puntero impreciso (p. ej., un dedo en una pantalla táctil).
• fine: Dispositivo de puntero preciso (p. ej., ratón, lápiz óptico).

            /* Aumentar el tamaño del objetivo de toque para punteros imprecisos */
@media (pointer: coarse) {
  button, .tap-area {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* Reducir el padding para punteros precisos */
@media (pointer: fine) {
  button, .tap-area {
    padding: 8px;
  }
}

            

              
                Copy
              
            
          

Esto es fundamental para diseñar interfaces amigables al tacto donde los objetivos de toque deben ser lo suficientemente grandes para la entrada con el dedo, al tiempo que permiten un diseño más compacto cuando se dispone de una interacción precisa con el ratón. Esto impacta directamente en la usabilidad en un espectro de dispositivos y habilidades de usuario, particularmente en mercados globales donde los dispositivos táctiles son predominantes.

color-gamut: más allá de sRGB

La característica de medios color-gamut te permite detectar si la pantalla del usuario admite una gama de colores más amplia que el sRGB estándar (p. ej., P3 o Rec. 2020). Esto permite a los diseñadores utilizar una paleta de colores más rica y vibrante en pantallas compatibles.

• srgb: Gama sRGB estándar.
• p3: La pantalla admite la gama P3 (más amplia que sRGB).
• rec2020: La pantalla admite la gama Rec. 2020 (aún más amplia).

            /* Usar colores P3 para elementos de marca más vibrantes en pantallas compatibles */
@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 0.96 0.28 0.21); /* Un rojo vibrante en P3 */
  }
}

            

              
                Copy
              
            
          

Aunque todavía está emergiendo, esta característica apunta hacia un futuro de experiencias web visualmente más impresionantes y precisas, especialmente para las industrias creativas o la entrega de contenido de alta fidelidad.

update: manejando las tasas de refresco de la pantalla

Esta característica indica la rapidez con la que el dispositivo de salida puede modificar la apariencia del contenido. Esto es útil para optimizar animaciones y contenido dinámico para diferentes tipos de pantalla.

• none: No puede actualizarse (p. ej., un documento impreso).
• slow: Se actualiza lentamente (p. ej., pantallas de tinta electrónica, algunos dispositivos antiguos).
• fast: Se actualiza rápidamente (p. ej., monitores de computadora típicos, smartphones).

            /* Reducir animaciones complejas en pantallas de actualización lenta */
@media (update: slow) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  .video-background {
    display: none;
  }
}

            

              
                Copy
              
            
          

Esta característica ayuda a asegurar que los usuarios en dispositivos como lectores electrónicos, que priorizan la duración de la batería y la visualización estática, no reciban una experiencia degradada o entrecortada debido a animaciones inapropiadas.

Técnicas avanzadas y mejores prácticas

Más allá de las características de medios individuales, la forma en que estructuras tu CSS y combinas estos patrones puede impactar significativamente en la mantenibilidad, el rendimiento y la calidad general del diseño.

Mobile-First vs. Desktop-First: una elección estratégica

La elección entre un enfoque mobile-first y desktop-first es fundamental para la estrategia de diseño responsivo.

• Mobile-First (min-width):
  • Comienza diseñando y estilizando para la pantalla más pequeña (móvil).
  • Usa media queries min-width para agregar progresivamente estilos para pantallas más grandes.
  • Beneficios:
    • Rendimiento: Los dispositivos móviles a menudo tienen menos potencia de procesamiento y conexiones a internet más lentas. Un enfoque mobile-first asegura que solo se carguen los estilos necesarios inicialmente, lo que conduce a cargas de página más rápidas. Esto es crítico para usuarios en regiones con infraestructura de internet en desarrollo.
    • Mejora progresiva: Construyes a partir de una experiencia central sólida, añadiendo mejoras para dispositivos más capaces.
    • Enfoque: Anima a los desarrolladores a priorizar el contenido y la funcionalidad esenciales.
• Desktop-First (max-width):
  • Comienza diseñando para pantallas grandes (escritorio).
  • Usa media queries max-width para sobrescribir estilos para pantallas más pequeñas.
  • Beneficios: Puede ser más fácil para equipos acostumbrados al diseño de escritorio tradicional, pero a menudo conduce a sobrescrituras más complejas para móviles.

Para la mayoría de los proyectos modernos, especialmente aquellos dirigidos a una audiencia global con diversas capacidades de dispositivos y condiciones de red, el enfoque mobile-first es altamente recomendado.

            /* Enfoque mobile-first: los estilos para pantallas pequeñas son los predeterminados */
.container {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Estilos específicos para tabletas */
  .container {
    width: 700px;
  }
}

@media (min-width: 1200px) {
  /* Estilos específicos para escritorio */
  .container {
    width: 1100px;
  }
}

            

              
                Copy
              
            
          

Uso de Propiedades Personalizadas de CSS (Variables) con Media Queries

Combinar las Propiedades Personalizadas de CSS (variables) con media queries es un cambio radical para mantener hojas de estilo grandes y responsivas. En lugar de repetir valores, los defines una vez y cambias sus valores dentro de las media queries.

            /* Definir valores predeterminados (móvil) */
:root {
  --primary-font-size: 16px;
  --spacing-unit: 1rem;
  --grid-columns: 1;
}

/* Ajustar valores para pantallas de tableta */
@media (min-width: 768px) {
  :root {
    --primary-font-size: 18px;
    --spacing-unit: 1.5rem;
    --grid-columns: 2;
  }
}

/* Ajustar valores para pantallas de escritorio */
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 20px;
    --spacing-unit: 2rem;
    --grid-columns: 3;
  }
}

/* Usar las variables en todo tu CSS */
body {
  font-size: var(--primary-font-size);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--spacing-unit);
}
```

/* Aplicar estilos para pantallas entre 600px y 900px */
@media (600px <= width <= 900px) {
  .promo-box {
    flex-direction: column;
  }
}

/* Equivalente usando la sintaxis tradicional */
@media (min-width: 600px) and (max-width: 900px) {
  .promo-box {
    flex-direction: column;
  }
}
```

@media print {
  /* Ocultar elementos no esenciales para la impresión */
  nav, footer, .sidebar, .ads {
    display: none;
  }

  /* Asegurar que el texto sea negro sobre blanco para la legibilidad */
  body {
    color: #000 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* Mostrar las URLs completas de los enlaces */
  a:link:after, a:visited:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Romper las páginas apropiadamente */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

            /* Mobile-first: por defecto, un menú oculto fuera de lienzo */
.main-nav {
  display: none;
}

.mobile-menu-toggle {
  display: block;
}

/* Tableta y Escritorio: mostrar menú horizontal */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .mobile-menu-toggle {
    display: none;
  }
}

/* Ajustes adicionales para pantallas muy anchas o relaciones de aspecto específicas */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .main-nav li {
    padding: 0 25px;
  }
}

            

              
                Copy
              
            
          

            /* Imagen de fondo predeterminada (móvil/baja resolución) */
.hero-section {
  background-image: url('hero-small.jpg');
  background-size: cover;
  background-position: center;
}

/* Imagen de fondo de resolución media/escritorio */
@media (min-width: 768px) {
  .hero-section {
    background-image: url('hero-medium.jpg');
  }
}

/* Imagen de fondo específica para alta densidad de píxeles (Retina) */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('hero-large@2x.jpg');
  }
}

            

              
                Copy
              
            
          

            /* Tipografía fluida usando calc() y clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

/* Ajustar la cuadrícula para tabletas en horizontal, prefiriendo más columnas */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Ajustar el grosor de la fuente para el modo de alto contraste para una mejor legibilidad */
@media (prefers-contrast: more) {
  p, li {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

            /* Variables de color centralizadas, adaptables al modo claro/oscuro */
:root {
  --background-color: #f0f0f0;
  --text-color: #333333;
  --link-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --text-color: #e0e0e0;
    --link-color: #88bbff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Reducir animaciones si lo prefiere el usuario */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Ajustes para el modo de colores forzados */
@media (forced-colors: active) {
  .custom-button {
    border: 1px solid Highlight; /* Asegurar que los bordes del botón sean visibles */
    background-color: Canvas;
    color: CanvasText;
  }
}

            

              
                Copy
              
            
          

            /* Ejemplo de una futura Container Query */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

            

              
                Copy